<template>
    <el-select
        v-model="currentValue"
        :size="size"
        :multiple="multiple"
        :clearable="clearable"
        :disabled="disabled"
        :placeholder="placeholder"
        @change="handleChange"
    >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        ></el-option>
    </el-select>
</template>

<script>
export default {
    name: 'qtSelect',

    props: {
        fildeName: {
            type: String
        },
        value: {
            type: [String, Number, Boolean, Array]
        },
        multiple: {
            type: Boolean
        },
        keyName: {
            type: Array
        },
        size: {
            type: String,
            default: 'mini'
        },
        placeholder: {
            type: String
        },
        clearable: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: [Boolean, String],
            default: false
        }
    },

    data() {
        return {
            currentValue: '',
            options: [
                {
                    label: '区域一',
                    value: 'shanghai'
                },
                {
                    label: '区域二',
                    value: 'beijing'
                }
            ]
        };
    },

    created() {
        this.currentValue = this.value;
    },

    methods: {
        handleChange() {
            this.$emit('change', this.currentValue, this.fildeName);
        }
    }
};
</script>
